<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 在网页中引入axios的js文件 -->
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.27.2/axios.min.js"></script>
</head>
<body>
    <h1>02-axios配合async和await的使用</h1>
    <button>加载</button>
    <ul id="uid">

    </ul>
    <script>
        // 对上面【加载】按钮添加点击事件，并通过点击事件发送Ajax请求，并加载学生信息输出到ul中

        const btn = document.querySelector("button");

        btn.onclick = async () => {
            try{
                // 通过axios发送Ajax并获取信息
                // const result = await axios({            // 采用通用方式
                //     url: "http://localhost:3000/stu",
                //     method: "get"
                // });
                // 采用axios的静态方法get()
                const result = await axios.get("http://localhost:3000/stu");
                
                // 获取id属性值为uid节点
                const uu = document.querySelector("#uid");
                // 遍历数据
                result.data.forEach(stu => {
                    let li = document.createElement("li");
                    li.innerHTML = stu.name;
                    uu.appendChild(li);
                });
            }catch(e){
                console.log("Ajax加载失败");
            }
        }

       
    </script>

</body>
</html>